<template>
  <div>
    <van-search
      v-model="keyword"
      shape="round"
      placeholder="请输入搜索关键词"
      @click="$router.push('/sousuo')"
    />
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
    <!-- 轮播图 -->
    <!-- 分类 -->
    <van-tabs @click="flTab">
      <van-tab
        v-for="(item, index) in fl"
        :key="index"
        :title="item.title"
        :name="item._id"
      >
      <!-- 排序的布局结构 -->
    <van-row>
      <van-col :span="3">综合</van-col>
      <van-col :span="3">价格</van-col>
      <van-col :span="3">销量</van-col>
      <van-col :span="5" @click="changeSort"
        >排序 <van-icon name="arrow-up" v-show="sort == 1" /><van-icon
          name="arrow-down"
          v-show="sort == 2"
      /></van-col>
    </van-row>
    <!-- 排序的布局结构 -->
      </van-tab>
    </van-tabs>
    <gList :lists="lists" @xQ="xQ" />
    <!-- 分类 -->
    
    <!-- 详情 -->
    <van-action-sheet v-model="xQshow" title="标题">
      <div class="content">
        <img :src="xq.pic" alt="" style="width: 100px" />
        <p>{{ xq.title }}</p>
        <p>￥{{ xq.price }}元</p>
        <van-button
          color="linear-gradient(to right, #ff6034, #ee0a24)"
          @click="addCart(xq)"
        >
          加入购物车
        </van-button>
      </div>
    </van-action-sheet>

    <!-- 详情 -->
    <!-- 返回顶部 -->
    <el-backtop :visibility-height="400" :bottom="80"></el-backtop>
  </div>
</template>
<script>
import gList from "./gList";
export default {
  components: {
    gList,
  },
  data() {
    return {
      keyword: "",
      sort: 0,
      xQshow: false,
      images: [
        "https://img01.yzcdn.cn/vant/apple-1.jpg",
        "https://img01.yzcdn.cn/vant/apple-2.jpg",
      ],
      users: [],
      xq: [],
      fl: [],
      cid: "",
    };
  },
  created() {
    this.List();
    this.fL();
  },
  methods: {
    List() {
      this.$axios.get("/json/list1.json").then((res) => {
        this.users = res.result;
      });
    },
    xQ(item) {
      this.xq = item;
      this.xQshow = true;
    },
    fL() {
      this.$axios.get("/json/fenlei.json").then((res) => {
        this.fl = res.result;
      });
    },
    addCart(goods) {
      this.$set(goods, "checked", false);
      this.$set(goods, "num", 1);
      this.$store.commit("addCart", goods);
      this.xQshow = false;
      this.$toast.success("加入购物车成功");
    },
    flTab(name) {
      console.log(name);
      this.cid = name;
    },
    changeSort() {
      if (this.sort == 1) {
        this.sort = 2;
      } else {
        this.sort = 1;
      }
    },
  },
  computed: {
    lists() {
      let goods = this.users;
      if (this.sort != 0) {
        goods.sort((a, b) => {
          //比较每个商品的价格值
          return this.sort == 1 ? a.price - b.price : b.price - a.price;
        });
      }
      if (this.cid == "") {
        return goods;
      }
      goods = goods.filter((item) => {
        return item.cid == this.cid;
      });
      return goods;
    },
  },
};
</script>
<style lang="scss" scoped>
img {
  width: 100%;
  height: 100%;
}
.content {
  padding: 16px 16px 160px;
}
</style>